import React from 'react';
import RuntimeTestsRunner from './ReanimatedRuntimeTestsRunner/RuntimeTestsRunner';

import './Animations.test'; // import tests

export default function RuntimeTestsExample() {
  return <RuntimeTestsRunner />;
}

import React, { useEffect } from 'react';
import { View } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { describe, test, expect, render, useTestRef, getTestComponent, wait } from './ReanimatedRuntimeTestsRunner/RuntimeTestsApi';

const AnimatedComponent = () => {
  const widthSV = useSharedValue(0);
  const ref = useTestRef('AnimatedComponent');

  const style = useAnimatedStyle(() => ( {
    width: withTiming(widthSV.value, { duration: 500 }),
  }));

  useEffect(() => {
    widthSV.value = 100;
  }, [widthSV]);

  return (
    <View
      style={{ flex: 1, flexDirection: 'column' }}>
      <Animated.View
        ref={ref}
        style={[{ height: 80,  backgroundColor: 'blue' }, style]}
      />
    </View>
  );
};

describe('Tests of animations', () => {
  test('withTiming - expect pass', async () => {
    await render(<AnimatedComponent />);
    const component = getTestComponent('AnimatedComponent');
    await wait(600);
    expect(await component.getAnimatedStyle('width')).toBe('100');
  });
});